<include file="Public/header"/>
<link href="__STATIC__/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet">
<link href="__STATIC__/tag-input/jquery.tagsinput.css" rel="stylesheet">


<div class="container padding-0 content-border">
    <div class="upload-side">
        <div class="z-slt">
            <a><i class="u-icn2 u-icn2-up"></i><span>上传曲谱</span></a>
        </div>
    </div>
    <div class="up-form">
        <form action="javascript:;" role="form" method="post"  class="form-horizontal">
            <div class="form-group">
                <label class="control-label col-sm-2 ">曲谱名</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control muted" name="name" value="">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">歌曲名</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" name="song_name" value="">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-2">歌手名</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" name="singer" value="">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">曲谱图片</label>
                <div class="col-sm-9">
                    <input type="file" name="images" id="images" value="" multiple class="file-loading">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">曲谱标签</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" name="tags" id="tags" value="" >
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">曲谱描述</label>
                <div class="col-sm-9">
                    <textarea type="text" class="form-control" name="desc" rows="5"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-6 col-sm-6">
                    <input type="hidden" name="creator" value="{$loginUser.uid}">
                    <button class="btn submit-btn" id="submit" type="submit">提 交</button>
                </div>
            </div>
        </form>
    </div>

</div>

<include file="Public/footer" />
<script src="__STATIC__/bootstrap-fileinput/js/plugins/piexif.min.js" type="text/javascript"></script>
<script src="__STATIC__/bootstrap-fileinput/js/plugins/sortable.min.js" type="text/javascript"></script>
<script src="__STATIC__/bootstrap-fileinput/js/plugins/purify.min.js" type="text/javascript"></script>
<script src="__STATIC__/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="__STATIC__/tag-input/jquery.tagsinput.js" type="text/javascript"></script>
<script>
    $(function(){
        $('#tags').tagsInput();

        var $input = $("#images");

        var footerTemplate = '<div class="file-thumbnail-footer" style ="height:94px">\n' +
            '   <div style="margin:5px 0">\n' +
            '       <input class="kv-input kv-new form-control input-sm text-center {TAG_CSS_NEW}" value="{caption}" placeholder="Enter caption...">\n' +
            '       <input class="kv-input kv-init form-control input-sm text-center {TAG_CSS_INIT}" value="{TAG_VALUE}" placeholder="Enter caption...">\n' +
            '   </div>\n' +
            '   {size} {progress} {actions}\n' +
            '</div>';

        $input.fileinput({
            uploadAsync:true,
            uploadUrl:"{:U('upload/uploadFiles')}",
            maxFileCount: 5,
            overwriteInitial:false,
            showUpload:false,
            showRemove:true,
            //layoutTemplates: {footer: footerTemplate},
            previewThumbTags: {
                '{TAG_VALUE}': '',        // no value
                '{TAG_CSS_NEW}': '',      // new thumbnail input
                '{TAG_CSS_INIT}': 'hide'  // hide the initial input
            },
            uploadExtraData: function() {  // callback example
                var out = {}, key, i = 0;

                $('.kv-input:visible').each(function() {
                    $el = $(this);
                    key = $el.hasClass('kv-new') ? 'new_' + i : 'init_' + i;
                    out[key] = $el.val();
                    console.log(key);
                    i++;
                });
                return out;
            },
            initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
            initialPreviewFileType: 'image', // image is the default and can be overridden in config below

        }).on("filebatchselected", function(event, files) {
            // trigger upload method immediately after files are selected
            $input.fileinput("upload");
        }).on('fileuploaded', function(event, data, previewId, index) {
            console.log(data.response);
            if(data.response) {
                $("#"+previewId).append('<input type="hidden" name="image_urls[]" image_url= "'+data.response.info.img_url+'" value="'+data.response.info.img_url+'" >');
            }
        }).on("filebatchuploadsuccess", function(event, data, previewId, index) {
            console.log("filebatchuploadsuccess");

        }).on("filepredelete",  function(event, key, jqXHR, data) {
            console.log('Key = ' + key);
            //console.log(data);
        });

            //验证是否登录
            var url = '/Home/login/check';
            $.get(url, function (result) {
                if (result.code == 200) {
                    $('#submit').click(function () {
                        var sheetUrl = "/Home/upload/save";
                        var data = $('.form-horizontal').serialize();
                        $.post(sheetUrl, data, function (result) {
                            console.log(result);//打印服务端返回的数据(调试用)
                            if (result.code == 200) {
                                layer.alert('提交成功',
                                    function (index) {
                                        $('.form-horizontal').reset();
                                    },
                                    {
                                        title: false,
                                        btnAlign: 'c'
                                    }
                                )
                            } else {
                                layer.msg('提交失败，请重试', {icon: 5})
                            }
                        })
                    })
                } else if (result.code == 10001) {
                    //登录窗口
                    layer.open({
                        type: 2,
                        title: '',
                        shadeClose: true,
                        area: ['600px', '420px'],
                        content: '/Home/login/index',
                        cancel: function (index, layero) {
                            console.log(1222)
                            $('#submit').css({
                                "background-color": "#999999",
                                "cursor": "not-allowed"
                            });
                        } 
                    });
                }
            });
    })
</script>